<template>
	<div class="game-container report-container editPicturePage">
		<div class="editPicturePage-content">
			<div class="form-header">
				<span>
					{{
						settingsData.templateType === 1
							? $t('agent.commission')
							: $t('agent.rebate')
					}}{{ $t('agent.contract_setting') }}
				</span>
				<span>
					<el-button type="info" @click="back">
						{{ $t('common.cancel') }}
					</el-button>
				</span>
			</div>
			<el-form ref="form" :inline="false" size="normal" :model="form">
				<FormTable
					ref="tableForm"
					:settings-data="settingsData"
					:edit-contract-list="form.tableData"
					:top-form="{ policyType: settingsData.policyType }"
					:custom-form="settingsData.policyTypeConfigId === 0"
					:contract-type="settingsData.templateType"
				></FormTable>
				<div class="remark-wrapper">
					<el-form-item style="text-align:center">
						<el-button type="primary" size="medium" @click="submit">
							<span>{{ $t('common.save') }}</span>
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
// import list from '@/mixins/list'
import { Decimal } from 'decimal.js'
import FormTable from '@/components/FormTable'
export default {
	// mixins: [list],
	components: {
		FormTable
	},
	props: {
		settingsData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			loading: false,
			submitDisabled: false,
			form: {
				tableData: [],
				remark: undefined
			},
			baseTableData: [],
			rebateRatioList: [],
			rebateRatioArr: [],
			minRebateRatio: {},
			validateValueStatus: false
		}
	},
	created() {
		this.loadScaleList()
	},

	methods: {
		loadScaleList() {
			this.loading = true
			const params = {
				merchantId: this.settingsData.merchantId,
				contractId: this.settingsData.id,
				contractType: this.settingsData.templateType,
				dataSourceType: 1
			}
			this.$api
				.getContractScaleListAPI(params)
				.then((res) => {
					this.form.tableData = res.data || []
					this.form.tableData.forEach((item) => {
						item.rebateRate = this._decimalToMul(item.rebateRate)
					})
					this.$refs['tableForm'].getRebateRatioList()
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		back() {
			this.$emit('update:pageType', 'i')
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		},

		checkRebateRatioAvailability() {
			const selectedArr = this.form.tableData.map(
				(item) => item.rebateRate
			)
			const originalArr = this.rebateRatioList.map(
				(item) => item.rebateRatio
			)
			const result = []
			selectedArr.forEach((v) => {
				if (!originalArr.includes(v)) {
					result.push(v)
					return
				}
			})
			return result.length
				? this.$t('agent.rebate_contract') +
						'：' +
						result.join('%,') +
						'%'
				: false
		},
		// 保存配置
		submit() {
			const ref = this.$refs.tableForm
			ref.$refs.tableForm.validate((valid) => {
				if (valid) {
					this.submitDisabled = true
					const rebateContractList = JSON.parse(
						JSON.stringify(ref.tableForm)
					)
					rebateContractList.forEach((item) => {
						item.rebateRate = this._decimalToDiv(item.rebateRate)
					})
					if (!rebateContractList.length) {
						return this.$confirm(
							this.$t('agent.rule_contract_tip2'),
							this.$t('agent.tip'),
							{
								confirmButtonText: this.$t('common.confirm'),
								showCancelButton: false,
								type: 'warning'
							}
						)
					}
					const data = {
						contractId: this.settingsData.id,
						contractType: this.settingsData.templateType,
						dataSourceType: 1,
						rebateContractList: rebateContractList
					}
					this.$api
						.setContractTemplateScale(data)
						.then(() => {
							this.$message.success(this.$t('agent.save_status'))
							this.submitDisabled = false
							this.back()
						})

						.catch(() => (this.submitDisabled = false))
				}
			})
		},
		reset() {
			this.loadScaleList()
		},
		_decimalToDiv(val, y) {
			return val * 1 === 0 ? 0 : new Decimal(val).div(y || 100).toNumber()
		},
		_decimalToMul(val) {
			return val * 1 === 0 ? 0 : new Decimal(val).mul(100).toNumber()
		}
	}
}
</script>

<style lang="scss" scoped>
.editPicturePage {
	background-color: #f5f5f5;
	margin: 0;
	padding: 15px 0 20px;
	>>> .selc .el-form-item__error {
		// padding-left: 20px !important;
		margin-left: 0 !important;
	}
	.editPicturePage-content {
		width: 80%;
		margin: 0 auto;
		background-color: #fff;
		position: relative;
		.form-header {
			height: 55px;
			line-height: 55px;
			width: 100%;
			background-color: rgba(0, 0, 0, 1);
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: rgba(255, 255, 255, 0.847058823529412);
				font-size: 16px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				top: 0;
				color: #999;
				font-weight: 400;
				font-size: 14px;
			}
		}
		.form-header:after {
			content: '.';
			height: 0;
			display: table;
			clear: both;
		}
		.form-wrapper {
			width: 100%;
			padding: 25px 30px 20px;
			background-color: #fff;
			position: relative;
			margin: 0 auto;
			::v-deep .top-form {
				padding: 20px;
				max-height: 600px;
				overflow: auto;
				box-shadow: rgba(88, 88, 88, 0.35) 0px 0px 5px;
				.remakeBox {
					width: 164px;
					position: absolute;
					left: 200px;
					bottom: 0;
					line-height: 20px;
				}
			}
		}
		.table-wrapper {
			::v-deep .el-form-item__error {
				margin-left: 20px;
			}
			::v-deep .el-table__row > td:first-child {
				padding-top: 0 !important;
			}
		}
		.operate-wrapper {
			display: flex;
			position: relative;
			padding-left: 30px;
			justify-content: flex-end;
			padding: 20px 30px;
		}
		.remark-wrapper {
			height: 200px;
			margin: 30px 30% 0;
		}
	}
}

.vi_VN,
.en_US {
	.table-wrapper ::v-deep .el-form {
		overflow: auto;
	}

	.table-wrapper ::v-deep .el-table {
		width: 1650px;
		max-width: 1650px;
	}
}
</style>
